<template>
	<view>
		<uni-nav-bar left-icon="arrowleft" right-text="清空" title="广告搜索" @clickLeft="back" @clickRight="remove" :fixed="true" class="top" status-bar></uni-nav-bar>
		<view class="ul qf">
			<view class="li">
				<text>广告员</text>
				：
				<input type="text" value="" placeholder="请输入广告员" />
			</view>
			<view class="li">
				<text>平台</text>
				：
				<input type="text" value="" placeholder="请输入手机号" />
			</view>
			<view class="li">
				<text>开始时间</text>
				：
				<picker mode="date" :value="date" start="2000-01-01" :end="endDate" @change="bindDateChange">
					<view class="uni-input" v-show="date">{{ date }}</view>
					<view class="uni-placeholder" v-show="!date">请选择下单时间</view>
				</picker>
				<image src="/static/img/calendar.png" class="time"></image>
			</view>
			<view class="li">
				<text>结束时间</text>
				：
				<picker mode="date" :value="date" start="2000-01-01" :end="endDate" @change="bindDateChange">
					<view class="uni-input" v-show="date">{{ date }}</view>
					<view class="uni-placeholder" v-show="!date">请选择结束时间</view>
				</picker>
				<image src="/static/img/calendar.png" class="time"></image>
			</view>
			<view class="li">
				<text>最低金额</text>
				：
				<input type="text" value="" placeholder="请输入最低金额" />
			</view>
			<view class="li">
				<text>最高金额</text>
				：
				<input type="text" value="" placeholder="请输入最高金额" />
			</view>
		</view>
		<view class="button" @click="find">搜 索</view>
	</view>
</template>

<script>
import { uniNavBar, uniIcons, uniPopup } from '@dcloudio/uni-ui';
export default {
	components: { uniNavBar, uniIcons, uniPopup },
	data() {
		return {
			array: ['中国', '美国', '巴西', '日本'],
			index: 0,
			date: null,
			endDate: null
		};
	},
	mounted() {
		this.endDate = this._endDate();
	},
	methods: {
		bindPickerChange(e) {
			console.log('picker发送选择改变，携带值为', e.target.value);
			this.index = e.target.value;
		},
		bindDateChange(e) {
			this.date = e.target.value;
		},
		back() {
			uni.navigateBack({
				delta: 1
			});
		},
		remove() {
			console.log('清空');
		},
		open() {
			// 需要在 popup 组件，指定 ref 为 popup
			this.$refs.popup.open();
		},
		close() {
			this.$refs.popup.close();
		},
		_endDate() {
			const date = new Date();
			let year = date.getFullYear();
			let month = date.getMonth() + 1;
			let day = date.getDate();
			return year + '-' + month + '-' + day;
		},
		find() {
			uni.navigateTo({
				url: './orderfindlist'
			});
		}
	}
};
</script>

<style lang="less" scoped>
.qf {
	padding: 0 20rpx;
	.li {
		position: relative;
		display: flex;
		flex-direction: row;
		line-height: 120rpx;
		text {
			font-size: 28rpx;
			width: 130rpx;
			text-align-last: justify;
		}
		input,
		picker {
			font-size: 26rpx;
			width: 557rpx;
			height: 90rpx;
			line-height: 90rpx;
			border: 1px solid #e1e1e1;
			border-radius: 10rpx;
			padding: 0 27rpx;
			box-sizing: border-box;
			margin: 15rpx 0;
			background: #ffffff;
			.uni-placeholder {
				color: #999999;
			}
		}
		.find,
		.uni-arrowdown,
		.time {
			position: absolute;
			right: 0;
			top: 15rpx;
			height: 90rpx;
			line-height: 90rpx;
			text-align: center;
		}
		.find {
			width: 121rpx;
			color: #ffffff;
			font-size: 26rpx;
			background: #bd3c8c;
			border-bottom-right-radius: 10rpx;
			border-top-right-radius: 10rpx;
		}
		.uni-arrowdown {
			width: 50rpx;
			pointer-events: none;
		}
		.time {
			top: 40rpx;
			right: 20rpx;
			width: 36rpx;
			height: 34rpx;
			pointer-events: none;
		}
	}
}
.button {
	height: 90rpx;
	line-height: 90rpx;
	margin: 30rpx 20rpx;
	text-align: center;
	color: #ffffff;
	border-radius: 50px;
	font-size: 32rpx;
	background: linear-gradient(90deg, #d2158a, #fc6395);
}
.structure {
	width: 80vw;
	max-height: 60vh;
	margin: 0 auto;
	overflow-y: auto;
	background: #ffffff;
	border-radius: 20rpx;
	.ul {
		padding-bottom: 100rpx;
		.li {
			line-height: 123rpx;
			.msg {
				font-size: 30rpx;
				padding: 0 20rpx 0 110rpx;
				border-bottom: 1px solid #e1e1e1;
				image {
					width: 26rpx;
					height: 22rpx;
					margin-right: 26rpx;
					transform: rotate(-90deg);
				}
				image.avtive {
					transform: rotate(0deg);
				}
				.name {
					margin-right: 30rpx;
				}
				.isname {
					color: #bd3c8c;
				}
			}
			.sublevel {
				padding: 0 20rpx 0 70rpx;
			}
		}
	}
	.choice {
		position: absolute;
		bottom: 0rpx;
		width: 100%;
		line-height: 88rpx;
		background: #bd3c8c;
		color: #fff;
		text-align: center;
		font-size: 30rpx;
		border-radius: 0 0 20rpx 20rpx;
	}
}
</style>
